<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>立可得</title>
  <link rel="stylesheet" href="./fonts/icomoon.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 版心 -->
  <div class="viewport">

    <!-- ******左侧****** -->
    <div class="column">
      <!--概览-->
      <div class="overview panel">
        <div class="inner"></div>
      </div>
      <!--监控-->
      <div class="monitor panel">
        <div class="inner">
          <div class="tabs">
            <a href="javascript:;" data-index="0" class="active">故障设备监控</a>
            <a href="javascript:;" data-index="1">异常设备监控</a>
          </div>
          <div class="content" style="display: block;">
            <div class="head">
              <span class="col">故障时间</span>
              <span class="col">设备地址</span>
              <span class="col">异常代码</span>
            </div>
            <div class="marquee-view">
              <div class="marquee">
                <div class="row">
                  <span class="col">20180701</span>
                  <span class="col">1111111北京市昌平西路金燕龙写字楼</span>
                  <span class="col">1000001</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190601</span>
                  <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190704</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000003</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20180701</span>
                  <span class="col">北京市昌平区建路金燕龙写字楼</span>
                  <span class="col">1000004</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000005</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000006</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                  <span class="col">1000007</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000008</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000009</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190710</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000010</span>
                  <span class="icon-dot"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="head">
              <span class="col">异常时间</span>
              <span class="col">设备地址</span>
              <span class="col">异常代码</span>
            </div>
            <div class="marquee-view">
              <div class="marquee">
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">22222222北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000001</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190703</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190704</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190705</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190706</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190707</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190708</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190709</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190710</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 点位 -->
      <div class="point panel">
        <div class="inner">
          <h3>点位分布统计</h3>
          <div class="chart">
            <div class="pie"></div>
            <div class="data">
              <div class="item">
                <h4>320,11</h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35"></i>
                  点位总数
                </span>
              </div>
              <div class="item">
                <h4>418</h4>
                <span>
                  <i class="icon-dot" style="color: #eacf19"></i>
                  本月新增
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ******中间 -->
    <div class="column">
      <!-- 地图 -->
      <div class="map">
        <h3>
          <span class="icon-cube"></span> 设备数据统计
        </h3>
        <div class="chart">
          <div class="geo"></div>
        </div>
      </div>
      <!-- 用户 -->
      <div class="users panel">
        <div class="inner">
          <h3>全国用户总量统计</h3>
          <div class="chart">
            <div class="bar"></div>
            <div class="data">
              <div class="item">
                <h4>120,899</h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35"></i>
                  用户总量
                </span>
              </div>
              <div class="item">
                <h4>248</h4>
                <span>
                  <i class="icon-dot" style="color: #eacf19"></i>
                  本月新增
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧 -->
    <div class="column">
      <!-- 订单 -->
      <div class="order panel">
        <div class="inner">
          <!-- 筛选 -->
          <div class="filter">
            <a href="javascript:;" data-key="day365" class="active">365天</a>
            <a href="javascript:;" data-key="day90">90天</a>
            <a href="javascript:;" data-key="day30">30天</a>
            <a href="javascript:;" data-key="day1">24小时</a>
          </div>
          <!-- 数据 -->
          <div class="data">
            <div class="item">
              <h4>20,301,987</h4>
              <span>
                <i class="icon-dot" style="color: #ed3f35;"></i>
                订单量
              </span>
            </div>
            <div class="item">
              <h4>99834</h4>
              <span>
                <i class="icon-dot" style="color: #eacf19;"></i>
                销售额(万元)
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 销售额 -->
      <div class="sales panel">
        <div class="inner">
          <div class="caption">
            <h3>销售额统计</h3>
            <a href="javascript:;" class="active" data-type="year">年</a>
            <a href="javascript:;" data-type="quarter">季</a>
            <a href="javascript:;" data-type="month">月</a>
            <a href="javascript:;" data-type="week">周</a>
          </div>
          <div class="chart">
            <div class="label">单位:万</div>
            <div class="line"></div>
          </div>
        </div>
      </div>
      <!-- 渠道 季度 -->
      <div class="wrap">
        <div class="channel panel">
          <div class="inner">
            <h3>渠道分布</h3>
            <div class="data">
              <div class="item">
                <h4>39 <small>%</small></h4>
                <span>
                  <i class="icon-plane"></i>
                  机场
                </span>
              </div>
              <div class="item">
                <h4>28 <small>%</small></h4>
                <span>
                  <i class="icon-bag"></i>
                  商场
                </span>
              </div>
            </div>
            <div class="data">
              <div class="item">
                <h4>20 <small>%</small></h4>
                <span>
                  <i class="icon-train"></i>
                  地铁
                </span>
              </div>
              <div class="item">
                <h4>13 <small>%</small></h4>
                <span>
                  <i class="icon-bus"></i>
                  火车站
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="quarter panel">
          <div class="inner">
            <h3>一季度销售进度</h3>
            <div class="chart">
              <div class="box">
                <div class="gauge"></div>
                <div class="label">75<small> %</small></div>
              </div>
              <div class="data">
                <div class="item">
                  <h4>1,321</h4>
                  <span>
                    <i class="icon-dot" style="color: #6acca3"></i>
                    销售额(万元)
                  </span>
                </div>
                <div class="item">
                  <h4>150%</h4>
                  <span>
                    <i class="icon-dot" style="color: #ed3f35"></i>
                    同比增长
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 排行榜 -->
      <div class="top panel">
        <div class="inner">
          <div class="all">
            <h3>全国热榜</h3>
            <ul>
              <li>
                <i class="icon-cup1" style="color: #d93f36;"></i> 可爱多
              </li>
              <li>
                <i class="icon-cup2" style="color: #68d8fe;"></i> 娃哈啥
              </li>
              <li>
                <i class="icon-cup3" style="color: #4c9bfd;"></i> 喜之郎
              </li>
            </ul>
          </div>
          <div class="province">
            <h3>各省热销 <i class="date">// 近30日 //</i></h3>
            <div class="data">
              <ul class="sup">
                <li>
                  <span>北京</span>
                  <span>25,179 <s class="icon-up"></s></span>
                </li>
                <li>
                  <span>河北</span>
                  <span>23,252 <s class="icon-down"></s></span>
                </li>
                <li>
                  <span>上海</span>
                  <span>20,760 <s class="icon-up"></s></span>
                </li>
                <li>
                  <span>江苏</span>
                  <span>23,252 <s class="icon-down"></s></span>
                </li>
                <li>
                  <span>山东</span>
                  <span>20,760 <s class="icon-up"></s></span>
                </li>
              </ul>
              <!-- 显示省份对应的销售数据 -->
              <ul class="sub">
                <!-- <li><span></span><span> <s class="icon-up"></s></span></li> -->
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="./js/rem.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/echarts.js"></script>
  <script src="./js/map_option.js"></script>
  <script src="./js/china.js"></script>

  <!-- 标签结构和样式准备好再写JS -->

  <!-- 1. 概览区域 -->
  <script>
    //1.1 准备内容数据
    var arr = [
      {
        value: 2190,
        colorStr: "#006cff",
        infoTitle: "设备总数"
      },
      {
        value: 3001,
        colorStr: "#6acca3",
        infoTitle: "运营设备"
      },
      {
        value: 190,
        colorStr: "#6acca3",
        infoTitle: "季度新增"
      },
      {
        value: 108,
        colorStr: "#ed3f35",
        infoTitle: "异常设备"
      },
    ];
    //1.2 循环创建内容标签
    arr.forEach(function (obj) {
      //创建标签格式
      var theDiv = $(` <div class="item">
                        <h4>${obj.value}</h4>
                        <span>
                            <i class="icon-dot" style="color: ${obj.colorStr}"></i>
                            ${obj.infoTitle}
                        </span>
                    </div>`)
      //归位 - 铺设到页面上
      $(".overview .inner").append(theDiv);
    })
  </script>

  <!-- 2. 监控区域 -->
  <script>
    //2.1 绑定点击事件 
    $(".monitor .tabs>a").click(function () { //this指向点击的a标签

      // 2.1.1切换高亮状态
      $(this).addClass("active").siblings().removeClass("active");

      //2.1.2切换内容div  -  与a标签对应索引的div显示,兄弟们隐藏
      $(".monitor .content").hide().eq($(this).index()).show();
    })
    //2.2 优化无限循环滚动 - 每个.marquee加自己的孩子,分开写
    //2.2.1 克隆内容 并放到内容区中 - 避免滚动时出现留空
    $(".monitor .marquee").each(function () {//each(function(){} - JQ里的遍历 ;foeEach()-原生JS里的遍历)
      $(this).append($(this).children().clone())
    })
  </script>

  <!--3. 点位分布统计  -->
  <script>
    //3.1 获取标签 - 初始化echarts对象
    var thePie = echarts.init(document.querySelector(".point .pie"));
    // var thePie = echarts.init($(".point .pie")[0]); 
    //3.2 copy合适的配置项对象 并修改数据
    pieOption = {
      tooltip: {  //提示框组件
        trigger: 'item', // 触发类型 - item数据项图形
        formatter: '{a} <br/>{b} : {c} ({d}%)' // a-系列名称 b-数据项名称 c-数值 d-百分比
      },

      series: [ //系列列表
        {
          name: '销量',
          type: 'pie', //饼状图类型
          radius: ["10%", "70%"], //[内半径,外半径]
          center: ['50%', '50%'],//中心点位置[左右,上下]
          roseType: 'radius',// 是否展示成南丁格尔图,通过半径区分数据的大小,扇区圆心角展现数据的百分比，半径展现数据的大小。
          label: {//饼状图上的文本标签
            show: true,
            fontSize: 10
          },
          labelLine: { //视觉引导线
            length: 10,
          },
          emphasis: {//高亮的扇区和标签样式。
            label: {
              show: true
            }
          },
          data:
            [{ value: 20, name: '云南' },
            { value: 26, name: '北京' },
            { value: 24, name: '山东' },
            { value: 25, name: '河北' },
            { value: 20, name: '江苏' },
            { value: 25, name: '浙江' },
            { value: 30, name: '四川' },
            { value: 42, name: '湖北' }]
        },
      ],

      color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
    };
    //3.3 配置项传入到echarts对象中
    thePie.setOption(pieOption);
  </script>

  <!-- 4. 地图实现 -->
  <script>
    //4.1 获取标签 - 初始化echarts对象
    var theMap = echarts.init($(".map .geo")[0]);
    //4.2 配置项对象 并把配置项传入echarts对象中
    mapOption();//在另一个js文件中
  </script>

  <!-- 5. 用户统计 -->
  <script>
    function createBar() {
      //5.1 获取标签 - 初始化echarts对象
      var theBar = echarts.init($(".users .bar")[0]);
      //5.2 配置项对象

      var item = { //自定义
        value: 1300,
        label: {},
        tooltip: {
          show: false,
        },
        //自定义特殊 itemStyle，仅对该数据项有效
        itemStyle: {
          color: "#254065",
          opacity: 1
        }
      }
      barOption = {
        color: new echarts.graphic.LinearGradient( //设置渐变色
          0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
          [{ offset: 0, color: '#00fffb' }, // 起始颜色 offset的范围是0 ~ 1,相当于百分比,表示这种颜色的渐变范围
          { offset: 1, color: '#0061ce' } //  结束颜色
          ]),

        tooltip: { //提示框组件。
          trigger: 'item', //坐标轴触发
          axisPointer: {  // 坐标轴指示器，坐标轴触发有效
            type: 'none' // 默认为直线
          },
        },
        grid: { //直角坐标系内绘图网格
          top: '4%',
          left: '3%', //grid 组件离容器左侧的距离。
          right: '4%',
          bottom: '3%',
          containLabel: true, //是否包含坐标轴的刻度标签
          show: true,
          borderColor: 'rgba(0, 240, 255, 0.3)',
        },
        xAxis: [ //直角坐标系 grid 中的 x 轴
          {
            type: 'category', //类目轴，适用于离散的类目数据。
            data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
            axisTick: { //坐标轴刻度相关设置。
              show: false, //是否显示坐标轴刻度
              alignWithLabel: true, //保证刻度线和标签对齐
            },
            axisLine: { //坐标轴轴线相关设置
              show: false
            },
            axisLabel: { //刻度文字
              color: '#4c9bfd'
            }
          }
        ],
        yAxis: [ //直角坐标系 grid 中的 y 轴
          {
            type: 'value', //数值轴，适用于连续数据
            axisTick: { //坐标轴刻度相关设置。
              show: false, //是否显示坐标轴刻度
              alignWithLabel: true, //保证刻度线和标签对齐
            },
            axisLine: { //坐标轴轴线相关设置
              show: false,
            },
            axisLabel: { //刻度文字
              color: '#4c9bfd'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(0, 240, 255, 0.3)',
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '60%',
            data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
          }
        ]
      };

      //5.3 配置项传入echarts对象中
      theBar.setOption(barOption);
    }
    createBar();
  </script>

  <!-- 6. 订单实现 -->
  <script>
    //6.1 准备数据
    var data = {
      day365: { orders: '20,301,987', amount: '99834' },
      day90: { orders: '301,987', amount: '9834' },
      day30: { orders: '1,987', amount: '3834' },
      day1: { orders: '987', amount: '834' }
    }
    //6.2 绑定点击事件
    $(".order .filter>a").click(function () {
      //6.3.9 点击时清除计时器
      clearInterval(timer);//

      //6.2.1 a标签上自定义属性data-key的值 对应 data的key
      var theObj = data[$(this).attr("data-key")]; //获取对应的key值
      $(".order .data h4").eq(0).html(theObj.orders);
      $(".order .data h4").eq(1).html(theObj.amount);
      //6.2.2 高亮
      $(this).addClass("active").siblings().removeClass("active");

      //6.3.8 点击时改变保存的索引 - 实现点击下次自动切换点击的下一个
      nowIndex = $(this).index();
      //6.3.10 点击完再创建回计时器
      createInterval();
    })
    //6.3 自动切换  
    //6.3.1 声明一个变量保存索引值
    var nowIndex = 0;
    // 6.3.2 计时器
    var timer;
    function createInterval() { //封装
      timer = setInterval(function () {
        //6.3.3 每两秒索引+1 
        nowIndex++;
        //6.3.7 限制索引的范围 - 提前判断,不然取不到0
        if (nowIndex == $(".order .filter>a").length) {
          nowIndex = 0
        }
        //6.3.4 当前的a标签
        var theA = $(".order .filter>a").eq(nowIndex);
        //6.3.5 高亮
        theA.addClass("active").siblings().removeClass("active");
        //6.3.6 数据变换
        $(".order .data h4").eq(0).html(data[theA.attr("data-key")].orders);
        $(".order .data h4").eq(1).html(data[theA.attr("data-key")].amount);
      }, 2000)
    }
    createInterval();
  </script>

  <!-- 7.销售统计 -->
  <script>
    //7.1 折线图 
    //7.1.1获取标签 初始化echarts对象
    var salesLine = echarts.init($(".sales .chart .line")[0]);
    //7.1.2 配置项对象
    var salseData = {
      year: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ],
      quarter: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      ],
      month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
      ],
      week: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
      ]
    }
    salesOption = {
      color: ['#00f2f1', '#ed3f35'],
      tooltip: { //提示框组件
        trigger: 'axis',//触发类型 - axis折线图柱状图触发
      },

      legend: { //图例组件
        right: "3%",
        top: "-3%",
        textStyle: {
          color: '#4c9bfd',
        },
        data: ['预期销售额', '实际销售额']
      },
      grid: { //直角坐标系内绘图网格
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        show: true,
        borderColor: '#4c9bfd'
      },
      xAxis: [
        {
          type: 'category', //坐标轴类型 ,类目轴，适用于离散的类目数据
          axisTick: { //坐标轴刻度相关设置
            show: false,
            alignWithLabel: true,//保证刻度线和标签对齐
          },
          axisLine: { //坐标轴轴线相关设置
            show: false,
          },
          axisLabel: { //坐标轴刻度标签的相关设置
            color: '#4c9bfd',
            interval: 1,//坐标轴刻度标签的显示间隔，在类目轴中有效
          },
          boundaryGap: false, //坐标轴两边留白策略

          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        {
          show: false,
          type: 'category',
          boundaryGap: false,
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLine: { //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: '#4c9bfd',
            },
          },
          axisTick: { //坐标轴刻度相关设置
            show: false,
            alignWithLabel: true,//保证刻度线和标签对齐
          },
          axisLabel: { //坐标轴刻度标签的相关设置
            color: '#4c9bfd',
            interval: 1,//坐标轴刻度标签的显示间隔，在类目轴中有效
          },
          splitLine: { //坐标轴在 grid 区域中的分隔线
            lineStyle: {
              color: '#4c9bfd',
            },
          },
        }
      ],
      series: [
        {
          name: '预期销售额',
          type: 'line',

          smooth: true,
          data: salseData.year[0],
        },
        {
          name: '实际销售额',
          type: 'line',
          smooth: true,
          data: salseData.year[1],
        }
      ]
    };
    //7.1.3 配置项传入echarts对象中
    salesLine.setOption(salesOption);

    //7.2 点击切换
    $(".sales .caption>a").click(function () {
      clearInterval(salesInterval); //点击时清除,再创建,相当于重新启动,留好间隔时间
      //7.2.1 高亮
      $(this).addClass("active").siblings().removeClass("active");
      //7.2.2 改变折线图的数据 - 通过自定义属性获取到salseData里边对应的数据对象
      var showData = salseData[$(this).attr("data-type")] //获取到对应的数据
      salesOption.series[0].data = showData[0];
      salesOption.series[1].data = showData[1];
      salesLine.setOption(salesOption);//重新绘图
      //7.3.4 点击时保存对应的索引值
      salesIndex = $(this).index() - 1; //index()取的索引值是指在所有兄弟中的索引值
      salesIntervalAll();
    })

    //7.3 自动切换 - 计时器
    var salesIndex = 0;//保存a的索引 
    var salesInterval;
    function salesIntervalAll() {
      salesInterval = setInterval(function () {
        salesIndex++;
        //7.3.1 判断a的索引,到最后一个回到第一个
        if (salesIndex == $(".sales .caption>a").length) {
          salesIndex = 0;
        }
        //7.3.2 设置高亮
        $(".sales .caption>a").eq(salesIndex).addClass("active").siblings().removeClass("active");
        //7.3.3 改变折线数据
        salesOption.series[0].data = (salseData[$(".sales .caption>a").eq(salesIndex).attr("data-type")])[0];
        salesOption.series[1].data = (salseData[$(".sales .caption>a").eq(salesIndex).attr("data-type")])[1];
        salesLine.setOption(salesOption);
      }, 2000)
    }
    salesIntervalAll();

    //7.4 鼠标移入-清除计时器/鼠标移出 - 创建计时器
    $(".sales .chart .line").hover(function () {//鼠标移入
      clearInterval(salesInterval);
    }, function () {//鼠标移出
      salesIntervalAll();
    })
  </script>

  <!-- 8.渠道和销售进度 -->
  <script>
    //8.1 获取标签 - 初始化echarts对象
    var wrapPie = echarts.init($(".wrap .quarter .gauge")[0])
    //8.2 配置项对象
    wrapOption = {
      series: [
        {
          name: '访问来源',
          type: 'pie',
          startAngle: 90,//起始角度，支持范围[0, 360]。
          radius: ['138%', '160%'],
          center: ["48%", "80%"],
          animation: true,//是否开启动画效果
          hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
          animationType: 'scale',//初始动画效果
          label: { //文本标签
            show: false,
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 1, 0, 0, [
              { offset: 0, color: '#0061ce' }, // 0 起始颜色
              { offset: 1, color: '#00fffb' },// 1 结束颜色
            ]
            ),
          },
          data: [
            { value: 1, itemStyle: { color: '#12274d' } },
            { value: 2, itemStyle: { color: 'transparent' } },
            { value: 1, },
          ]
        }
      ]
    };
    //8.3 配置项传入echarts对象中
    wrapPie.setOption(wrapOption);
  </script>

  <!-- 9.热销排行 -->
  <script>
    //9.1 准备省份对应的销售数据
    var topArr = [
      { name: '可爱多', num: '9,086' },
      { name: '娃哈哈', num: '8,341' },
      { name: '喜之郎', num: '7,407' },
      { name: '八喜', num: '6,080' },
      { name: '小洋人', num: '6,724' },
      { name: '好多鱼', num: '2,170' },
    ]

    //9.2 绑定鼠标移入事件
    $(".top .sup>li").mouseenter(function () {
      //9.4.5 鼠标移入时清空计时器
      clearInterval(topInerval)
      //9.2.1 高亮  铺设数据 - 调用函数
      createnewliList(this);//传入当前函数的this
      //9.4.7 移入时更新当前索引值
      topIndex = $(this).index();
    })

    //9.4.6 鼠标移出时恢复计时器
    $(".top .sup").mouseleave(function () {
      createtopInterval();
    })

    //9.3 设置初始的高亮和数据
    // 让要显示的li调用一次mouseenter事件
    $(".top .sup>li").eq(0).mouseenter();

    //9.4 计时器 - 引用函数
    //9.4.1 声明一个变量保存索引
    var topIndex = 0;
    var topInerval;
    createtopInterval();

    // -----封装函数-----
    // 打乱数据 并 铺设到页面上
    function createnewliList(matterLi) {
      //9.2.1 高亮
      $(matterLi).addClass("active").siblings().removeClass("active");
      //9.2.2 打乱数据
      var topBrr = []; //创建一个新数组用来打乱顺序
      $.extend(true, topBrr, topArr)//深拷贝原数组数据
      topBrr.sort(function () { //sort排序
        return 0.5 - Math.random();//返回值为正数,交换当前遍历的相邻的两个值
      })
      //9.2.3 循环创建数据标签 
      $(".top .sub").html("");//每次创建前清空之前的li数据
      topBrr.forEach(function (obj) {
        //创建标签格式
        var subLi = $(`<li>
                          <span>${obj.name}</span>
                          <span> ${obj.num}
                            <s class="icon-up"></s>
                          </span>
                        </li>`);
        //归位
        $(".top .sub").append(subLi);
      })
    }
    //循环计时器
    function createtopInterval() {
      topInerval = setInterval(function () {
        //9.4.2 每循环一次索引值+1
        topIndex++;
        //9.4.3 判断到最后一个返回第一个
        if (topIndex == $(".top .sup>li").length) {
          topIndex = 0;
        }
        //9.4.4 当前索引的li 高亮 铺设数据 -调用函数
        createnewliList($(".top .sup>li").eq(topIndex));
      }, 2000)
    }
  </script>
</body>

</html>